<template>
	<view class="order-item">
		<view class="title u-border-bottom">
			<view class="avatar">
				<u-avatar :src="orderItem.avatar" size="80" show-level :level-bg-color="config.mainColor"></u-avatar>
			</view>
			<view class="font-medium u-flex-1"><text>{{orderItem.name}}</text></view>
			<text class="u-light-color">{{orderItem.statusText}}</text>
		</view>

		<view class="order-content">
			<view class="u-flex-1">
				<text class="u-font-32 font-medium">{{orderItem.title}}</text>
			</view>
			<view class="price u-font-20">
				￥
				<text class="u-font-32">{{orderItem.price}}</text>
			</view>
		</view>

		<view class="order-action">
			<u-button plain size="mini" shape="circle" hover-class="none" class="u-m-l-20"
				:customStyle="customBtnStyle">取消订单</u-button>
			<u-button type="primary" size="mini" shape="circle" hover-class="none" class="u-m-l-20">去支付</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bb-order-item",
		props: {
			orderItem: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				statusMap: {},
				customBtnStyle: {
					borderColor: "#cccccc",
					color: '#999999'
				},
				config: this.$appConfig
			};
		}
	}
</script>

<style lang="scss" scoped>
	.order-item {
		background-color: #fff;
		border-radius: 20rpx;

		.title {
			height: 70rpx;
			display: flex;
			align-items: center;
			padding-right: 30rpx;

			.avatar {
				transform: scale(0.6);
			}
		}

		.order-content {
			display: flex;
			padding: 22rpx 13rpx 32rpx 18rpx;

			&:before {
				content: "";
				display: inline-block;
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background-color: $u-tips-color;
				margin-right: 17rpx;
				margin-top: 20rpx;
			}

			.price {
				min-width: 130rpx;
				text-align: right;
			}
		}

		.order-action {
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;
			padding: 0 32rpx 32rpx;

			.u-button {
				margin-left: 20rpx;
			}
		}
	}
</style>